<?php
    // Start session
    session_start();
    // Check the session
    if(!isset($_SESSION['user_id']) || $_SESSION['user_id'] == '')
    {
        header('Location:index.php?status=EXP');
        die();
    }
    include "gestionAdmin.php";
?>
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Detalles del proyecto</title>
    <!-- Bootstrap core CSS -->
    <link href="bootstrap/css/bootstrap.css" rel="stylesheet">
  </head>

  <body>
    <!-- Main bar on top -->
    <div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
        <div class="navbar-header">
            <a class="navbar-brand" href="menuDirectivo.php"><span class="glyphicon glyphicon-home"></span> Menú principal </a>
        </div>
        <div class="navbar-header navbar-right">
            <a href="index.php" class="btn btn-info" role="button">Cerrar Sesión</a>
        </div>
    </div>

    <!-- Main jumbotron -->
    <div class="jumbotron">
      <div class="container">
        <h1><span class="glyphicon glyphicon-stats"></span> Detalles del proyecto</h1>
        <p class="text-primary">Aquí se muestran los detalles del proyecto seleccionado. </p>
      </div>
    </div>

    <div class="container">

      <div class="row">
        <div class="col-md-12">
            <h1>Avance detallado</h1>
            <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
        </div>
      </div><!-- End of row -->
     
      <div hidden class="row">
        <div hidden class="col-md-12">
            <h1>Tabla con los mismos datos</h1>
            <table id="datatable">
                <thead>
                    <tr>
			            <th>Nombre de la actividad</th>
			            <th>Porcentaje de avance en la actividad</th>
		            </tr>
                </thead>
                <tbody>
                    <?php
                        $tablita = dimeDetallesProyecto($_REQUEST['idProyecto']);
                        foreach($tablita as $fila)
                        {
                            echo '<tr>';
                            echo '<td>' . $fila['nombre'] . '</td>';
                            echo '<td>' . $fila['porcentaje'] . '</td>';
                            echo '</tr>';
                        }
                    ?>
                </tbody>
            </table>
        </div>
      </div><!-- End of row -->

      <hr>

      <footer>
        <p>&copy; <b>Dash HR</b> Derechos Reservados ® 2013</p>
      </footer>
    </div> <!-- /container -->

    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script src="bootstrap/js/bootstrap.min.js"></script>
    <script src="http://code.highcharts.com/highcharts.js"></script>
    <script src="http://code.highcharts.com/modules/data.js"></script>
    <script src="http://code.highcharts.com/modules/exporting.js"></script>
    <script type="text/javascript">
$(function () {
    $('#container').highcharts({
        data: {
            table: document.getElementById('datatable')
        },
        chart: {
            type: 'column'
        },
        title: {
            text: 'Avance del proyecto por actividades'
        },
        yAxis: {
            allowDecimals: false,
            title: {
                text: 'Porcentaje'
            }
        },
        tooltip: {
            formatter: function() {
                return '<b>'+ this.series.name +'</b><br/>'+
                    this.y +' '+ this.x.toLowerCase();
            }
        }
    });
});
    </script>
  </body>
</html>
